<template>
	<view class="uiwu">
		<!-- #ifndef MP-TOUTIAO -->
		<uiwu-head-bar :title="app.distribution_name ? app.distribution_name : '分销中心'" titleColor=" #FFF" />
		<!-- #endif -->
		<view class="uiwu-user uiwu-flex-align">
			<image :src="items.avatar" mode="aspectFill"></image>
			<view class="info">
				<view class="name uiwu-flex-align">{{ items.nickname }}<text v-if="items.is_vip"
						class="uiwu-flex-center">分销会员</text></view>
				<view class="tips">我的邀请人：{{ items.spread_name }}</view>
			</view>
		</view>
		<view class="uiwu-user uiwu-flex-align" style="height: 50rpx;">

		</view>

		<!-- <view class="uiwu-money">
			<view class="uiwu-money-top uiwu-flex">
				<view class="uiwu-flex-column">
					<view class="left">可提现(元)</view>
					<view class="money">{{items.brokerage_price}}</view>
				</view>
				<view class="uiwu-flex">
					<view class="btn uiwu-flex-center" @tap="openWindow(`extract?money=${items.brokerage_price}`)">申请提现
					</view>
				</view>
			</view>
			<view class="uiwu-money-list uiwu-flex">
				<view class="uiwu-money-list-item">
					<text>今日收益</text>
					<view>
						<text>￥</text>
						<text>{{items.today_brokerage}}</text>
					</view>
				</view>
				<view class="uiwu-money-list-item">
					<text>本月收益</text>
					<view>
						<text>￥</text>
						<text>{{items.tomonth_brokerage}}</text>
					</view>
				</view>
				<view class="uiwu-money-list-item">
					<text>累计收益</text>
					<view>
						<text>￥</text>
						<text>{{items.total_brokerage}}</text>
					</view>
				</view>
			</view>
		</view> -->

		<view class="uiwu-fans uiwu-flex">
			<view @tap="openWindow('fans')" class="uiwu-fans-item uiwu-flex uiwu-flex-center">
				<view>我的粉丝({{ items.spread_count }})</view>
				<uiwu-icon color="#CCCCCC" type="arrowright"></uiwu-icon>
			</view>
		</view>
		<view class="uiwu-fans uiwu-flex">
			<view class="uiwu-fans-item uiwu-flex uiwu-flex-center">
				<view>我的邀请码<text>({{ items.invite_code }})</text></view>
				<view class="copy" @tap="uiwu.copy(items.invite_code)">复制</view>
			</view>
		</view>
		<view class="uiwu-list">
			<view class="uiwu-flex" style="flex-wrap: wrap;">
				<view class="uiwu-list-item" @tap="uiwu.openWindow('poster')">
					<image src="@/static/image/fenxiaohaibao.png" mode="widthFix"></image>
					<text>邀请海报</text>
				</view>
				<!-- <view class="uiwu-list-item" @tap="uiwu.openWindow('order')">
					<image src="/static/image/fenxiaodingdan.png" mode="widthFix"></image>
					<text>收益明细</text>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { distribution, uiwu } from '@/api/interface/interface';
import { configStore } from '@/store/configStore';
import { onLoad } from '@dcloudio/uni-app';
import { ref, toRefs } from "vue";

const store = configStore();
const { app } = toRefs(store);
console.log(app.value, "app");
const items = ref({})
const openWindow = (url: string): void => {
	uiwu.openWindow(url)
}
const getDistribution = async () => {
	const { data } = await distribution()
	items.value = data
}
onLoad(() => {
	getDistribution()
})
</script>

<style lang="scss">
page {
	background-color: #e6e6e6;
}

.uiwu {
	//min-height: 494rpx;
	height: 120px;
	padding: 0 30rpx;
	background: linear-gradient(254.82deg, rgba(237, 121, 126, 1) 0%, rgba(230, 0, 18, 1) 100%);
}

.uiwu-list {
	border-radius: 20rpx;
	background-color: #fff;
	padding-bottom: 30rpx;

	&-title {
		padding: 30rpx 40rpx;
		border-bottom: 1rpx dashed #f2f2f2;
		font-size: 32rpx;
		font-weight: bold;
		color: #222222;
	}

	&-item {
		width: calc(100% / 4);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding-top: 30rpx;

		image {
			width: 70rpx;
		}

		text {
			font-size: 28rpx;
			font-weight: normal;
			color: #222222;
			margin-top: 16rpx;
		}
	}
}

.uiwu-fans {
	height: 100rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	margin: 26rpx 0;
	align-items: center;

	&-item {
		height: 47rpx;
		flex: 1;
		line-height: 1;
		position: relative;

		&:nth-child(1) {
			border-right: 1rpx solid #f2f2f2;
		}

		>view {
			font-size: 28rpx;
			font-weight: 400;
			color: #222222;

			text {
				color: $qj-red;
			}
		}
	}

	.copy {
		font-size: 24rpx;
		color: $qj-red;
		margin-left: 20rpx;
	}
}

.uiwu-money {
	width: 100%;
	height: 290rpx;
	background: #FFFFFF;
	border-radius: 20rpx;

	&-top {
		padding: 35rpx;
		padding-bottom: 0;
		justify-content: space-between;
		align-items: center;

		.left {
			font-size: 24rpx;
			font-weight: 500;
			color: #666666;
		}

		.money {
			font-size: 32rpx;
			font-weight: 500;
			color: #EF821E;
			margin-top: 12rpx;
		}

		.uiwu-felx {
			align-items: center;

			text {
				font-size: 32rpx;
				font-weight: 600;
				color: $qj-red;

				&:nth-child(1) {
					font-size: 24rpx;
				}
			}
		}

		.btn {
			width: 160rpx;
			height: 58rpx;
			background: $qj-red;
			border-radius: 29rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}

	&-list {
		padding: 30rpx 35rpx;

		&-item {
			flex: 1;
			text-align: center;
			position: relative;

			&::after {
				content: "";
				position: absolute;
				right: 0;
				width: 1rpx;
				height: 50rpx;
				background: #DDDDDD;
				top: 50%;
				margin-top: -20rpx;
			}

			&:last-child {
				&::after {
					width: 0;
				}
			}

			>text {
				font-size: 24rpx;
				font-weight: normal;
				color: #333333;
				opacity: 0.8;
			}

			view {
				margin-top: 10rpx;

				text {
					font-size: 32rpx;
					font-weight: 600;
					color: #222222;

					&:nth-child(1) {
						font-size: 24rpx;
					}
				}
			}
		}
	}
}

.uiwu-user {
	height: 182rpx;

	image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.info {
		margin-left: 30rpx;

		.name {
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;

			text {
				width: 118rpx;
				height: 32rpx;
				background: rgba(0, 0, 0, 0.47);
				border-radius: 16rpx;
				border: 2rpx solid #000000;
				font-size: 22rpx;
				font-weight: 500;
				margin-left: 24rpx;
			}
		}

		.tips {
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(#FFFFFF, 0.8);
			margin-top: 6rpx;
		}
	}
}
</style>